import React from 'react';
import styles from '@/pages/Organization/Hr/index.less';

const toPercent = point => {
    let str = Number(point * 100).toFixed(2);
    str += '%';
    return str;
};
const getData = data => {
    const total = data[0].value + data[1].value;
    let womanScale = 0;
    let manScale = 0;
    if (total !== 0) {
        womanScale = data[0].value / total;
        manScale = data[1].value / total;
    }
    const newData = {
        total,
        womanScale: womanScale === 0 ? 0 : toPercent(womanScale),
        manScale: manScale === 0 ? 0 : toPercent(manScale)
    };
    return newData;
};
const PeopleSex = ({ data }) => {
    const { womanScale, manScale } = getData(data);
    return (
        <div
            style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                height: '225px'
            }}
        >
            <div className={styles.secondBox}>
                <div className={[styles.man]}>
                    <div className={styles.imgBox}>
                        <em className="iconfont icongender_icon_male_default" />
                    </div>
                    <div className={styles.uiBar}>
                        <i style={{ width: womanScale }}>
                            <span>{womanScale}</span>
                        </i>
                    </div>
                </div>
                <div className={[styles.woman]}>
                    <div className={styles.imgBox}>
                        <em className="iconfont icongender_female_icon_default" />
                    </div>
                    <div className={styles.uiBar}>
                        <i style={{ width: manScale }}>
                            <span>{manScale}</span>
                        </i>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PeopleSex;
